$caret-w-base ?= 0.25rem
$blue = rgb(10, 140, 210)
$text = @css{hsl(var(--nf) / var(--un-text-opacity))}

// stylelint-disable-next-line
@css { @unocss all; }

// Reset

body
h1
ul
	padding 0
	margin 0

a:link
	text-decoration none

// General

// Navbar
nav-bar
	display flex

	a
		color $text

.dropdown-menu
	@apply menu-compact p-0 w-48 bg-white shadow-lg z-8

editable-table
	display block
	margin 0.25rem

c-pagination
	justify-content center

upload-zone
	display block
	text-align center
	cursor pointer
	background #ddd
	border 0.2em solid #ccc
	border-radius 0.3em

.p-btn
	display flex
	flex-direction column
	justify-content center
	height 3rem
	padding-left 0.3rem

// tab-container

[role=tablist]
	@apply flex justify-evenly
	width 100%
	a
		color #111

[role=tab]
	padding 0 0.25em
	cursor pointer

[role=tab][aria-selected=true]
	border-bottom 0.15em solid
	border-image linear-gradient(2rad, rgb(0, 192, 64) 0%, rgb(192, 192, 32) 50%, rgb(45, 81, 237) 100%) 1 1

[c-show]
	display none !important

.checkbox
	border-style solid

// Table
.table-select
	th:first-child
	td:first-child
		padding-right 0

	tfoot
		td:not(:first-child)
			padding 0

	input[type=checkbox]
		margin 0

	input.input-sm[type=number]
		width 4rem

.hover td
	max-width 10rem
	overflow auto

// Dropdown arrow/caret
.caret
	display inline-block
	width 0
	height 0
	margin-left 0.1em
	vertical-align middle

	border-top $caret-w-base dashed
	border-right $caret-w-base solid transparent
	border-left $caret-w-base solid transparent
